Image Sizes in WordPress

WordPress is great at managing your images, and allows you to set custom crop dimensions for new uploads. It's important to provide optimized, custom-sized images rather than allow the browser to receive a large image to be resized on the fly.

You register image sizes via the add_image_size() function.

However, registering an additional image size incurs in a performance penalty every time you upload a new image. When an image is uploaded to the site, WordPress now has to resize and cut each of the specified image sizes, generating the appropriate thumbnails for you to use. These images also add up on the server, consuming storage even if they're not being used.

You should make an effort to use the fewest possible number of image sizes. If you require a custom size that's similar to one that already exists but is off by only a few pixels, you should consider reusing the existing image size rather than add another.

Naming Image Sizes

To prevent us from having more thumbnails than we need, we use a naming scheme that lets us see if any of the already registered sizes could be used in a new situation. The name has two components: (1) a qualitative dimension (like medium or large) and (2) an aspect ratio.

[qualitative-size]_[aspect-ratio]

You should avoid giving your thumbnails a name that indicates a specific utilization because it will confuse maintainers if that image size ends up being used differently.

Qualitative Dimension

This should be one of the following:

small: under 300 pixels wide
medium: between 300 and 800 pixels wide
large: between 800 and 1300 pixels wide
huge: over 1300 pixels wide

Aspect Ratio

The aspect ratio relates an image's width with its height. It also serves as a indicator of the images orientation (an image with a 4:3 ratio will be wider that it is taller).

Because WordPress generates HTML class names from the the image size slug, we use the word by instead of the colon separator. So a medium 4:3 image would be named medium_4by3.

A few guidelines on ratios:

Try to hit a nice round number to factorize, such as 4by3, 16by9 and 21by9.
If the image is square, declare it as 1by1.

One fixed dimension

Sometimes images have a dimension that is set to an "absurd" value ir order to force a resize based on one dimension only. For these images the naming should be done using the information of that size and its orientation (w - for width, h - for height).

[qualitative-size]_[reference-dimension][orientation]

Examples

/**
 * See the WordPress documention for more information on the 'add_image_size()' function.
 * https://developer.wordpress.org/reference/functions/add_image_size/
 */

// Both sizes fixed.
add_image_size( 'medium_4by3', 400, 300, true );
add_image_size( 'medium_5by13', 500, 1300, true );

// Based on one of the dimensions.
add_image_size( 'large_1600w', 1600, 99999, false );

General guidelines

Register as few custom sizes as you can, and try to reuse existing image sizes.
Images can be used and reused anywhere. Avoid giving your thumbnails a name that indicates a specific utilization because it will confuse maintainers if that size is used differently.

Image Sizes